//该组件用于管理项目的所有route
import VueRouter from 'vue-router';
import About from '../pages/About';
import Home from '../pages/Home';
import News from '../pages/News';
import Message from '../pages/Message';
import Detial from '../pages/Detial';
import Flow from '../pages/Flow';

export default new VueRouter({
    routes:[
        {
            path:'/about',
            component: About
        },
        {
            path:'/home',
            component: Home,
            children:[
                {
                    path:'news',
                    component: News,
                    children:[
                        {
                            name:'pathveriable',
                            path:'flow/:newsId/:newsName', //注意这里要使用占位符接收params参数，否则路由匹配失败
                            component: Flow,
                             //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detial组件，该种方式一般不使用，因为传递的参数是固定的
                             //props:{a: 1, b: 'hello'}
                             //props的第二种写法，值为布尔，会将params参数以props的形式传给Detial组件
                             //props:true
                             //props的第三种写法，值为函数，该函数返回的对象中的所有key-value都会以props的形式传给Detial组件，该种方式适用于query和params参数
                            props($route){
                                return {
                                    newsId: $route.params.newsId,
                                    newsName: $route.params.newsName
                                }

                            }
                        }
                    ]
                },
                {
                    path:'message',
                    component: Message,
                    children:[
                        {
                            path:'detial',
                            component: Detial, 
                            //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detial组件
                            //props:{a: 1, b: 'hello'}
                            //props的第三种写法，值为函数，该函数返回的对象中的所有key-value都会以props的形式传给Detial组件
                            props($route){
                                return {
                                    messageId: $route.query.messageId,
                                    messageName: $route.query.messageName
                                }

                            }
                        }
                    ]
                }
            ]
        }
    ]
})